<!--头部公共部分-->
{include file="common/header" /}

<div class="x-nav">
      <span class="layui-breadcrumb">
        <a>首页</a>
        <a>客户管理</a>
        <a>
          <cite>统计库存</cite></a>
      </span>
	<a class="layui-btn layui-btn-xs layui-btn-small" style="float:right;margin-top: 10px;"
	   href="javascript:location.replace(location.href);" title="刷新">
		<i class="layui-icon layui-icon-refresh"></i> </a>
</div>
<div id="wodekehu" class="x-body" class="clear:both;">
	<div class="layui-row"
		 style="padding-left:20px;margin: 10px 0 -10px 0;;border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;">
		<div class="layui-form layui-col-md12 x-so layui-form-pane" style="margin-bottom: -3px;">
			<div class="layui-form layui-col-md12 x-so layui-form-pane" style="margin-bottom: -3px;">
				<div class="layui-input-inline">
					<input type="text" style="width:300px;"  name="day" id="date" placeholder="选择日期范围" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-input-inline">
					<button class="layui-btn" id="search">
						<i class="layui-icon layui-icon-search"></i>筛选</button>
					<button class="layui-btn layui-btn-danger" id="clear">
						<i class="layui-icon"></i>重置</button>
				</div>
			</div>
		</div>
		<table class="layui-table" id="datalist" lay-filter="Event"></table>
	</div>
</div>
<!--底部公共部分-->
{include file="common/footer" /}
<script>
	layui.use(['element','table',  'upload', 'laydate', 'layer','form'], function () {
		let table = layui.table,
			element = layui.element,
			laydate = layui.laydate,
			form = layui.form,
			layer = layui.layer,
			$ = layui.$;

		//限定可选日期
		laydate.render({
			elem: '#date'
			,range: true
			,trigger: 'click'
		});

		let loading = layer.load();
		//数据表格 方法级渲染
		let tableIns = table.render({
			elem: '#datalist'
			, url: '{:url("Customer/stock")}'
			, method: 'POST'
			, loading: true
			, parseData: function (res) { //res 即为原始返回的数据
				if (res.code === 1) {
					res.code = 0;
				} else {
					res.code = -1;
				}
				return {
					"code": res.code, //解析接口状态
					"msg": res.message, //解析提示文本
					"count": res.data.total, //解析数据长度
					"data": res.data.data //解析数据列表
				};
			},
			cols: [[
				{field: 'name', title: '销售',style:'color:#01AAED;font-weight: bold;',minWidth:150, align: 'center'},
				{field: 'total', title: '总库存',minWidth:150, align: 'center'},
				{field: 'class_0', title: '0类客户',minWidth:150, align: 'center'},
				{field: 'class_1', title: '3类客户',minWidth:150, align: 'center'},
				{field: 'class_2', title: '4类客户',minWidth:150, align: 'center'},
				{field: 'class_3', title: '5类客户',minWidth:150, align: 'center'},
				{field: 'class_4', title: '1类客户',minWidth:150, align: 'center'},
				{field: 'class_5', title: '2类客户',minWidth:120, align: 'center'}
			]]
			, page: true
			, limit: 30
			, done: function () {
				layer.close(loading);
			}
		});

		//搜索项
		$('#search').click(function () {
			let field = {};
			field.day = $('input[name=day]').val();
			tableIns.reload({
				where: field,
				method: 'POST',
				page: {
					curr: 1 //重新从第 1 页开始
				}
			});
		});
		//清除
		$('#clear').click(function () {
			$('.layui-input').each(function (index, element) {
				$(element).val('');
			})
			tableIns.reload({
				where: {
					'day': ''
				},
				page: {
					curr: 1 //重新从第 1 页开始
				}
			});
		});

	});
</script>